//该文件用于创建整个应用的路由器
import VueRouter from "vue-router"

import Banner from '../pages/Banner.vue'
import ParkSpace from '../pages/ParkSpace.vue'
import ShowPath from '../pages/ShowPath.vue'
import Pay from '../pages/Pay.vue'
import Reserve from '../pages/Reserve.vue'
import Login from '../pages/Login.vue'
import MyReserve from '../pages/MyReserve.vue'
import Admin from '../pages/admin/Admin.vue'

import axios from 'axios'

//创建并暴露一个路由器
const router = new VueRouter({
    routes: [ //配置每一组路由规则
        {
            path: '/', //路径
            component: Banner, //路径所展示的组件实例
            meta: {
                title: '首页',
            }
        },
        {
            path: '/parkspace',
            component: ParkSpace,
            meta: {
                title: '车位信息页面',
            }
        },
        {
            path: '/path',
            component: ShowPath,
            meta: {
                title: '车位引导页面',
            }
        },
        {
            path: '/pay',
            component: Pay,
            meta: {
                title: '缴费页面',
            }
        },
        {
            path: '/reserve',
            component: Reserve,
            meta: {
                title: '预约车位页面',
            }
        },
        {
            path: '/login',
            component: Login,
            meta: {
                title: '管理员登录',
            }
        },
        {
            path: '/myreserve',
            component: MyReserve,
            meta: {
                title: '我的预定页面',
            }
        },
        {
            path: '/admin',
            component: Admin,
            meta: {
                title: '管理员页面',
            },
            //独享全局路由守卫-前置
            beforeEnter: (to, from, next)=>{ //独享路由守卫（只有前置没有后置），当路由进入该组件之前，执行beforeEnter方法，内部逻辑写法和全局路由守卫一样
                console.log('独享前置路由守卫', to, from)
                //登录后，且是管理员才能查看Admin组件
                axios.post('/admin/checkLogin').then(reponse => {
                    if (reponse.data.flag && reponse.data.res.status == 1) {
                        //已登录管理员，可以进去
                        next()
                    } else{
                        console.log('未登录或不是管理员')
                    }
                }, err => {
                    console.warn(err)
                })
            }
        },
    ]
})

//创建全局前置路由守卫
/*
router.beforeEach((to, from, next)=>{
    console.log('全局前置路由守卫', to, from)
    //当localstorage中的school=atguigu时才允许访问news和message
    //if (to.name === 'xinwen' || to.name === 'xiaoxi') { //这里可以用to.name或to.path判断，这么写比较麻烦
    if (to.meta.isAuth) { //通过meta自定义属性简化写法    
        if (localStorage.getItem('school') === 'atguigu') {
            next()
        } else{
            alert('学校名不对，无权限查看！')
        }
    } else{
         next()
    }
})
*/

//创建全局后置路由守卫
router.afterEach((to, from)=>{
    //后置路由守卫使用较少，一般终于执行一些交互上的后置处理，这里让浏览器标题随着路由组件的meta.title变化
    document.title = to.meta.title || '智慧停车场'
})


export default router